<template>
  <div>
    <el-row>
      <el-col :span="10">
        <el-input
            v-model="token"
            placeholder="请输入token"></el-input>
      </el-col>
      <el-col :span="10">
        <el-input
            v-model="primary"
            placeholder="请输入primary"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="page">查询</el-button>
      </el-col>
    </el-row>
    <el-table
        :data="data"
        border
        style="width: 100%">
      <el-table-column
          prop="key"
          label="token"
      >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.key" placement="top-end">
            <span>{{ `${scope.row.key.substr(0, 25)}.....` }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          prop="value.primary"
          label="主键"></el-table-column>
      <el-table-column
          prop="value.status"
          label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.value.status === 1 ? 'success' : 'danger'">
            {{ scope.row.value.status === 1 ? '在线' : '下线' }}
          </el-tag>
        </template>
      </el-table-column>
      <!--    "ua_info": {
                              "browserName": "Chrome 12",
                              "browserType": "Browser",
                              "browserversion": "121.0.0.0",
                              "sysName": "Windows 10",
                              "deviceType": "Computer",
                              "isMobile": false,
                              "browserMinorVersion": "0",
                              "browserMajorVersion": "121"
                          },-->
      <el-table-column
          prop="value.ua_info.browserName"
          label="浏览器"></el-table-column>
      <el-table-column
          prop="value.ua_info.browserversion"
          label="版本"></el-table-column>
      <el-table-column
          prop="value.ua_info.sysName"
          label="系统"></el-table-column>
      <el-table-column
          prop="value.ua_info.deviceType"
          label="设备">
        <template slot-scope="scope">
          <el-tag :type="scope.row.value.ua_info.deviceType === 'Computer' ? 'primary' : 'waring'">
            {{ scope.row.value.ua_info.deviceType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="value.ua_info.isMobile"
          label="是否为移动端">
        <template slot-scope="scope">
          <el-tag :type="scope.row.value.ua_info.isMobile ? 'success' : 'danger'">
            {{ scope.row.value.ua_info.isMobile ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="value.ua_info.browserMinorVersion"
          label="次版本"></el-table-column>
      <el-table-column
          prop="value.ua_info.browserMajorVersion"
          label="主版本"></el-table-column>
      <el-table-column
      >
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="warning"
              @click="handleOffline(scope.row)" v-show="scope.row.value.status">下线
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleKick(scope.row)" v-show="scope.row.value.status">踢出
          </el-button>
          <el-button
              size="mini"
              type="primary"
              @click="handleOnline(scope.row)" v-show="!scope.row.value.status">上线
          </el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {TokenApi} from "@/core/request/api/TokenApi";
import {PageRequestBody} from "@/core/request/model/common/pageRequestBody";


export default {
  name: "tokenPage",
  data() {
    return {
      token: '',
      primary: '',
      data: [],
    }
  },
  methods: {
    handleKick(row) {
      TokenApi.kickout({token: row.key, primary: row.value.primary}).then(res => {
        if (!res.data.code) {
          row.value.status = 0
          this.$message.success("下线成功")
        }
      })
    },
    handleOnline(row) {
      TokenApi.login({token: row.key, primary: row.value.primary}).then(res => {
        if (!res.data.code) {
          row.value.status = 1
          this.$message.success("上线成功")
        }
      })
    },
    handleOffline(row) {
      TokenApi.deleteOrLogOut({token: row.key, primary: row.value.primary}).then(res => {
        if (!res.data.code) {
          // 在this.data中删除
          this.data = this.data.filter(item => item.key !== row.key);
          this.$message.success("下线成功")
        }
      })
    },
    getToken() {
      TokenApi.page({token: this.token, primary: this.primary}).then(res => {
        if (!res.data.code) {
          this.data = res.data.data.records
        }
      })
    },
    page() {
      var pageRequestBody = new PageRequestBody();
      pageRequestBody.token = this.token;
      pageRequestBody.primary = this.primary;
      TokenApi.page(pageRequestBody).then(res => {
        if (!res.data.code) {
          this.data = res.data.data.records
        }
      })
    }
  },
  mounted() {
    this.page()
  }
}
</script>

<style scoped>

</style>